<template>
  <div class="board-console">
    <loadding :loading="isLoading" />
    <header-nav :options="options" />
    <main-page />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import html2canvas from 'html2canvas'
import HeaderNav from './components/Header'
import Loadding from './components/Loadding'
import MainPage from './components/Main'
export default {
  components: { HeaderNav, Loadding, MainPage },
  data() {
    return {
      canvasOpacity: 0,
      options: {
        // 标题
        title: '通用模板',
        // 是否显示大屏设置
        widgetConfig: false,
        // 屏幕适配方式
        scaleWay: 1,
        // 屏幕高宽缩放展示级别
        widgetStyle: {
          top: 16,
          left: 16,
          transform: 50,
          height: 1080,
          width: 1920
        },
        selectedStyle: {}
      }
    }
  },
  computed: {
    ...mapState({
      isLoading: state => state.screen.isLoading
    })
    // widgetStyle() {
    //   return {
    //     top: this.options.widgetStyle.top + 'px',
    //     left: this.options.widgetStyle.left + 'px',
    //     transform: 'scale(' + this.options.widgetStyle.transform / 100 + ')',
    //     height: this.options.widgetStyle.height + 'px',
    //     width: this.options.widgetStyle.width + 'px'
    //   }
    // }
  },
  watch: {},
  created() {
    this._updateIsLoadding(true)
  },
  mounted() {
    this.initCanvas()
    window.onresize = () => {
      this.initCanvas()
    }
    this._updateIsLoadding(false)
  },
  methods: {
    ...mapMutations({
      _updateIsLoadding: 'screen/_updateIsLoadding'
    }),
    // 初始化画布
    initCanvas() {
      return
      /*  const that = this
      const canvas = document.getElementById('canvas')
      canvas.height = this.options.widgetStyle.height
      canvas.width = this.options.widgetStyle.width
      const context = canvas.getContext('2d')
      if (context != null) {
        setTimeout(() => {
          that.drawGrid(context, '#ccc', 20, 20), 300
        })
      } */
    },
    // base64转blob
    base64ToBlob(code) {
      const parts = code.split(';base64,')
      const contentType = parts[0].split(':')[1]
      const raw = window.atob(parts[1])
      const rawLength = raw.length
      const uInt8Array = new Uint8Array(rawLength)

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },
    // 下载图片
    downloadFile(fileName, content) {
      const aLink = document.createElement('a')
      const blob = this.base64ToBlob(content) // new Blob([content]);

      const evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', true, true)
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob)
      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    // 快照
    capture() {
      const _this = this
      html2canvas(document.querySelector('.screen'), { width: 273, height: 145 }).then(function(
        canvas
      ) {
        var dataUrl = canvas.toDataURL('image/jpeg', 0.7)
        _this.downloadFile('capture.jpg', dataUrl)
      })
    },
    // 画辅助线
    drawGrid(context, color, stepx, stepy) {
      context.strokeStyle = color
      context.lineWidth = 0.5
      for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
        context.beginPath()
        context.moveTo(i, 0)
        context.lineTo(i, context.canvas.height)
        context.stroke()
      }
      for (let i = stepy + 0.5; i < context.canvas.height; i += stepy) {
        context.beginPath()
        context.moveTo(0, i)
        context.lineTo(context.canvas.width, i)
        context.stroke()
      }
    }
  }
}
</script>
<style  lang='scss'>
// header高度
$headeHeight: 48px;
// left宽度
$leftNavWidth: 84px;
.board-console {
  width: 100%;
  height: 100%;
  position: relative;
}
.board-console .widgetConfig {
  position: fixed;
  width: 266px;
  min-height: 120px;
  right: 0px;
  z-index: 10001;
  top: $headeHeight;
  box-sizing: border-box;
  background: rgb(32, 32, 32);
  padding: 16px;
}

.board-console-zone .board-console-zone-left {
  width: $leftNavWidth;
  top: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}
.board-console-zone .module-list {
  position: relative;
  width: 100%;
  height: 100%;
}
.board-console-zone .board-console-zone-right {
  position: absolute;
  top: 0;
  bottom: 0;
  left: $leftNavWidth;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #505050;
  overflow: auto;
}
.board-console-zone .screen {
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 16px solid transparent;
  border-right: 16px solid transparent;
  box-sizing: content-box;
  background-repeat: no-repeat;
  background-position: 50%;
  background: #25416b;
}
.board-console .drawing {
  position: relative;
}
.board-console .drawing-grid {
  position: absolute;
}
.board-console .zoom-area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.board-console .widget-area {
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
.board-console .selection-board {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
}
</style>
